<template>
  <div class="content">
    <div class="page-content">
      <Navigation
          :navigation-list="[{id:1,value:'首页',url:'/home/index'},{id:3,value:'职位详情',url:''}]"></Navigation>
      <div class="block">
        <div class="position-abstract-block">
          <div class="abstract-block">
            <div class="title-block">
              <div class="title">{{info.jobTitle}}</div>
              <div v-if="info.salaryNegotiable===0" class="wage">{{info.minSalary}}-{{info.maxSalary}}元</div>
              <div v-if="info.salaryNegotiable===1" class="wage">面议</div>
            </div>
            <div class="other-block">酒泉市·阿克赛市&nbsp;&nbsp;&nbsp;&nbsp;<span>/</span>&nbsp;&nbsp;&nbsp;&nbsp;{{info.expRequireText}}&nbsp;&nbsp;&nbsp;&nbsp;<span>/</span>&nbsp;&nbsp;&nbsp;&nbsp;{{info.minEducationText}}</div>
          </div>
          <div class="refresh">
            <div class="text"><i class="el-icon-time" style="margin-right: 3px;"></i>{{ info.crtTimeText }} 更新</div>
            <div style="padding-left: 20px" class="text">投递量：{{ info.deliveryCount }}</div>
            <div style="padding-left: 20px" class="text">浏览量：{{ info.lookCount }}</div>
          </div>
          <div class="btn-block"  style="margin-top: 10px">
            <div class="btn-item btn1" v-if="!user||info.resume===0" @click="insertWorkApply">投简历</div>
            <div class="btn-item btn1" v-else>已投递</div>
            <div class="btn-item btn2" @click="sendHiMessage('您好，我在就业帮帮我上看到贵公司的招聘信息，对贵公司【'+info.jobTitle+'】岗位很感兴趣，期待与您沟通。')">聊一聊</div>
          </div>
          <div class="collect" style="display: flex;align-items: center" v-if="user">
            <div  @click="addCollect" v-if="info.collection===0" style="display: flex;align-items: center">
              <i class="iconfont icon-shoucang"></i>收藏
            </div>
            <div  @click="insertCollect" v-if="info.collection===1">
              <i class="el-icon-star-on" style="color: #ff7626;font-size: 18px;"></i>已收藏
            </div>
            <div  @click="editItem" style="margin-left: 20px" >
              <i class="el-icon-warning-outline"></i>举报
            </div>
          </div>

        </div>
        <div class="position-info-block">
          <div class="recruiters-info">
            <div class="info-block">
              <img :src="info.comRecruiters.user.faceUrl" alt="" class="recruiters-photo" v-show="info.comRecruiters.user.faceUrl">
              <div class="info">
                <div class="name-block">
                  <div class="name">{{info.comRecruiters.realName}}</div>
                  <div class="online-time">·{{info.comRecruiters.loginTimeText}}</div>
                  <div class="authentication">已认证</div>
                </div>
                <div class="other-block">{{info.comRecruiters.comPosition}}·{{info.comRecruiters.enterprise.enterpriseName}}</div>
              </div>
            </div>
            <div class="btn-block" v-if="user">
              <div class="btn-item btn2" @click="sendHiMessage('您好，我对贵公司【'+info.jobTitle+'】岗位很感兴趣，期待与您沟通。')">聊一聊</div>
            </div>
          </div>
          <el-alert
              title="用工警示"
              type="warning"
              description="平台严禁用人单位做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收取求职者财物、向求职者集资、让求职者入股等，您一旦发现此类行为，请立即进行举报！"
              show-icon>
          </el-alert>
          <div class="position-info">
            <div class="title">职位描述</div>
            <div class="introduce" style="white-space: pre-wrap;" v-html="info.jobDescription"></div>
          </div>
          <div class="map">
            <div class="map-title">工作地址</div>
            <div id="container"></div>
            <div class="look" @click="editMap">点击查看地图</div>
          </div>
          <div class="favorite-item">
            <div class="title-item">
              <div class="favorite-title">猜你喜欢</div>
<!--              <router-link :to="{path:'/position/position-filtrate',query:{jobType:this.info.jobType}}" class="more">更多-->
<!--                  <i class="el-icon-arrow-right" style="color:#999;"></i>-->
<!--              </router-link>-->
            </div>
            <template v-if="position.length>0">
              <div class="favorite-list" v-loading="positionLoading">
                <PositionItem class="position-item" :key="item.id" :data="item" v-for="(item) in position"></PositionItem>
              </div>
            </template>
            <el-empty v-else></el-empty>
          </div>
        </div>
        <div class="company-block">
          <div class="title">公司信息</div>
          <div class="company-info">
            <router-link :to="{name:'company',query:{id:info.comRecruiters.enterprise.id}}">
              <img :src="info.comRecruiters.enterprise.logoUrl" alt="" class="company-photo" v-if="info.comRecruiters.enterprise.logoUrl">
              <img src="@/assets/images/company_default.png" class="company-photo" alt="" v-else>
            </router-link>
            <div class="info-block">
              <div class="name-block">
                <router-link :to="{name:'company',query:{id:info.comRecruiters.enterprise.id}}" class="name">{{info.comRecruiters.enterprise.brandName}}</router-link>
                <div class="btn2 focus-on" v-if="info.follow===0" style="color: #fff;" @click="addLookMe">关注</div>
                <div class="btn3 focus-on" v-if="info.follow===1" style="width: 70px;" @click="insertLookMe">已关注</div>
              </div>
              <div class="position">在招职位<span class="num">{{info.comRecruiters.enterprise.fairCount}}</span>个</div>
            </div>
          </div>
          <div class="authentication">
            <div class="authenticate"><i class="el-icon-set-up"></i>已认证营业执照</div>
            <div class="authenticate"><i class="el-icon-s-custom"></i>已认证手机号</div>
          </div>
          <div class="info-item">
            <span class="info-label">企业行业：</span>
            <span class="info-value">{{info.comRecruiters.enterprise.enterpriseName}}</span>
          </div>
          <div class="info-item">
            <span class="info-label">人数规模：</span>
            <span class="info-value">{{info.comRecruiters.enterprise.scaleName}}</span>
          </div>
          <div class="info-item">
            <span class="info-label">工作地点：</span>
            <span class="info-value">{{info.jobAddress}}</span>
          </div>
          <div class="info-item">
            <span class="info-label">注册时间：</span>
            <span class="info-value">{{info.comRecruiters.enterprise.estdate}}</span>
          </div>
          <div class="map">
            <div id="map"></div>
          </div>
          <div class="info-item">
            <span class="info-label">经营范围：</span>
            <span class="info-value">{{info.comRecruiters.enterprise.enterpriseIntroduction}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--弹窗-->
    <el-dialog title="举报" v-if="dialogVisible" :visible.sync="dialogVisible" width="40%"
               :close-on-click-modal="false" :close-on-press-escape="false" top="20vh" :destroy-on-close="true">
      <Report ref="report"  :eid="info.comRecruiters.enterprise.id" :pid="info.id" @dialogVisible="dialogVisible = false" ></Report>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.report.submit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog  v-if="dialogVisibleMap" :visible.sync="dialogVisibleMap" width="50%"
               :close-on-click-modal="false" :close-on-press-escape="false" top="20vh" :destroy-on-close="true">
     <ChooseMap ref="choosePosition" :latitude="info.latitude" :longitude="info.longitude" :jobAddress="info.jobAddress" @dialogVisibleMap="dialogVisibleMap = false"></ChooseMap>
    </el-dialog>
  </div>
</template>

<script>
// 引入加载TXMap的方法
import Navigation from "@/components/Navigation/Navigation";
import {mapGetters} from "vuex";
import {getJobById, GuessYouLoveApi, insertWorkApplyApi} from "@/api/position";
import {insertLookMeApi} from "@/api/attention";
import {sendHiMessage} from "@/utils/im";
import Report from "@/components/MineCenter/Candidate/Dialog/Report";
import PositionItem from "@/components/PositionItem/PositionItem";
import ChooseMap from "@/components/Map/ChooseMap";
export default {
  name: "positionDetail",
  components: { Navigation,Report,PositionItem,ChooseMap},
  data() {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3,
      dialogVisible: false,
      dialogVisibleMap:false,
      position:[],
      positionLoading:false,
      info:{
        jobTitle:'',
        salaryNegotiable:0,
        minSalary:'',
        maxSalary:'',
        expRequireText:'',
        minEducationText:'',
        collection:'',
        resume:0,
        jobDescription:'',
        follow:0,
        comRecruiters:{
          realName:'',
          comPosition:'',
          user:{faceUrl:''},
          loginTimeText:'',
          enterprise:{
            id:null,
            enterpriseName:'',
            logoUrl:'',
            fairCount:0,
            scaleName:'',
            estdate:'',
            comIntroduction:'',
          }
        }
      }
    }
  },
  methods:{
    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap () {
      // 定义地图中心点坐标
      var center = new window.TMap.LatLng(this.info.latitude, this.info.longitude)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById('container'), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        //pitch: 43.5, // 设置俯仰角
        //rotation: 45 // 设置地图旋转角度
      })
      var marker = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
          // mark样式
          "marker": new TMap.MarkerStyle({
            "width": 25,
            "height": 38,
            "anchor": { x: 12, y: 32 },
          })
        },
        geometries: [{
          "id": 'demo1',
          "styleId": 'marker',
          "position": new TMap.LatLng(this.info.latitude, this.info.longitude),
          "properties": {
            "title": this.info.jobAddress,
            "address": this.info.jobAddress,
          }
        }]
      });
      //初始化infoWindow
      var infoWindow = new TMap.InfoWindow({
        map: map,
        position: new TMap.LatLng(this.info.latitude, this.info.longitude),
        offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
      });
      infoWindow.close();//初始关闭信息窗关闭
      //监听标注点击事件
      marker.on("click", function (evt) {
        console.log(evt)
        //设置infoWindow
        infoWindow.open(); //打开信息窗
        infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
        infoWindow.setContent(`<div style="white-space:
          nowrap;margin:10px;color:#000;text-align:left;">
          <p style="font-size:16px;">${evt.geometry.properties.title}</p>
           </div>`);//设置信息窗内容
      })
      console.log(map)
      console.log(window)
    },
    initMap1 () {
      // 定义地图中心点坐标
      var center = new window.TMap.LatLng(this.info.comRecruiters.enterprise.enterpriseLatitude, this.info.comRecruiters.enterprise.enterpriseLongitude)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById('map'), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        //pitch: 43.5, // 设置俯仰角
        //rotation: 45 // 设置地图旋转角度
      })
      console.log(map)
      console.log(window)
    },
    getPublishByGuessYouLove(){
      this.positionLoading=true
      GuessYouLoveApi({page:1,limit:6,jobType:this.jobType,pubId:this.id}).then((res)=>{
        this.position=res.list
      }).finally(()=>{
        this.positionLoading=false
      })
    },
  //公用打开弹窗
    editItem() {
      this.dialogVisible = true;
    },
    editMap(){
      this.dialogVisibleMap=true;
    },
    sendHiMessage(msg){
      if(!this.user)
      {
        this.$message.info('请先登录')
        this.$router.replace({path:"/user/login"});
        return;
      }
      sendHiMessage(msg,this.info.comRecruiters.user.mobile,this.id).then(()=>{
        this.$router.push({
          name:'Chat'
        })
      })
    },
    addLookMe(){
      const loading = this.$loading({text: '关注中'})
      insertLookMeApi({eid:this.info.comRecruiters.enterprise.id,userType:1,lookMeType:2,state:2}).then((res)=>{
        loading.close()
        this.$confirm('关注成功！', '提示', {
          confirmButtonText: '查看我关注的企业',
          cancelButtonText: '继续找工作',
          type: 'success'
        }).then(() => {
          this.$router.replace({path:"/mine-center/candidate?tableId=3"});
        }).catch(() => {
        });
        this.getPosition()
      }).finally(()=>{
        loading.close()
      })
    },
    insertLookMe(){
      const loading = this.$loading({text: '取消关注中'})
      insertLookMeApi({eid:this.info.comRecruiters.enterprise.id,userType:1,lookMeType:2,state:1}).then((res)=>{
        loading.close()
        this.$message.success('取消关注成功')
        this.getPosition()
      }).finally(()=>{
        loading.close()
      })
    },
    addCollect(){
      const loading = this.$loading({text: '收藏中'})
      insertLookMeApi({pid:this.id,userType:1,lookMeType:3,state:2}).then((res)=>{
        loading.close()
        this.$confirm('收藏成功！', '提示', {
          confirmButtonText: '查看我收藏的职位',
          cancelButtonText: '继续找工作',
          type: 'success'
        }).then(() => {
          this.$router.replace({path:"/mine-center/candidate?tableId=2"});
        }).catch(() => {
        });
        this.getPosition()
      }).finally(()=>{
        loading.close()
      })
    },
    insertCollect(){
      const loading = this.$loading({text: '取消收藏中'})
      insertLookMeApi({pid:this.id,userType:1,lookMeType:3,state:1}).then((res)=>{
        loading.close()
       this.$message.success('取消收藏成功')
        this.getPosition()
      }).finally(()=>{
        loading.close()
      })
    },
    insertWorkApply(){
      if(!this.user)
      {
        this.$message.info('请先登录')
        this.$router.replace({path:"/user/login"});
        return;
      }
      const loading = this.$loading({text: '投递中'})
      insertWorkApplyApi({publishId: this.info.id,}).then((res)=>{
        loading.close()
        this.$confirm('投递成功！', '提示', {
          confirmButtonText: '查看我投递的简历',
          cancelButtonText: '继续找工作',
          type: 'success'
        }).then(() => {
          this.$router.replace({path:"/mine-center/candidate?tableId=4"});
        }).catch(() => {
        });

        sendHiMessage('您好，我对贵公司【'+this.info.jobTitle+'】岗位很感兴趣，期待与您沟通。',this.info.comRecruiters.user.mobile,this.id)
        this.getPosition()
        const message = this.tim.createCustomMessage({
          to: 'dhs_enterprise_'+this.info.comRecruiters.user.mobile,
          conversationType: this.TIM.TYPES.CONV_C2C,
          payload: {
            data: 'sendResume',
            description: '',
            extension: JSON.stringify({agree: null})
          }
        })
        this.tim.sendMessage(message)
      }).finally(()=>{
        loading.close()
      })
    },
    LookMe(){
      if(this.user)
      {
        insertLookMeApi({pid:this.id,userType:1,lookMeType:1,state:2}).then((res)=>{
        }).finally(()=>{
        })
      }
    },
    getPosition(){
      getJobById({id:this.id}).then((res)=>{
        if(res==null){
          this.$router.push({
            path: '/404'
          })
        }
        else{
          this.info=res
          this.initMap()
          this.initMap1()
        }
      }).finally(()=>{
      })
    },
  },
  computed:{
    ...mapGetters(['user'])
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.getPosition()
    this.LookMe()
    this.getPublishByGuessYouLove()

  }
}
</script>

<style lang="scss" scoped>
.content {
  .page-content {
    width: $contentWidth;
    min-height: $fullMinHeight;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .block{
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .position-abstract-block{
        width: 100%;
        background: #fff;
        border-radius: 5px;
        height: 130px;
        padding: 20px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        position: relative;
        .abstract-block{
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: calc(100% - 340px);
          .title-block{
            display: flex;
            font-size: 28px;
            align-items: center;
            .title{
              font-weight: bold;
              margin-right: 20px;
              flex-grow: 0;
            }
            .wage{
              font-size: 24px;
              font-weight: bold;
              color:$orange;
              flex-grow: 0;
            }
          }
          .other-block{
            margin-top: 10px;
            font-size: 14px;
            span{
              color: $midGray;
            }
          }
        }
        .refresh{
          display: flex;
          right: 20px;position: absolute;
          font-size: 13px;
          .text{
            color: $darkGray;
          }
        }
        .btn-block{
          display: flex;
          flex-direction: row;
          align-items: center;
          .btn-item{
            width: 160px;
            height: 45px;
          }
          .btn1{
            margin-right: 20px;
          }

        }
        .collect{
          cursor: pointer;
          position: absolute;
          right: 25px;
          bottom:10px;
          color: $darkGray;
          font-size: 14px;
        }
      }
      .position-info-block{
        width: calc(100% - 400px);
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        .el-alert{
          .el-alert__icon{
            color: #E6A23C !important;
          }
        }
        .el-alert__content{
          .el-alert__title{
            color: #E6A23C !important;
          }
        }
        .recruiters-info{
          padding: 20px;
          width: 100%;
          height: 120px;
          background: #fff;
          border-radius: 5px;
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-bottom: 20px;
          .info-block{
            width: calc(100% - 85px);
            display: flex;
            flex-direction: row;
            .recruiters-photo{
              width: 65px;
              height: 65px;
              border-radius: 50%;
            }
            .info{
              width: calc(100% - 85px);
              margin-left: 20px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .name-block{
                display: flex;
                flex-direction: row;
                align-items: center;
                .name{
                  font-size: 17px;
                }
                .authentication{
                  background: $orange;
                  padding: 2px 4px;
                  font-size: 12px;
                  border-radius: 3px;
                  margin-left: 10px;
                  color: #fff;
                }
                .online-time{
                  margin-top: 3px;
                  margin-left: 5px;
                  font-size: 11px;
                  color: $darkGray;
                }
              }
              .other-block{
                font-size: 14px;
                margin-top: 10px;
              }
            }
          }
          .btn-block{
            display: flex;
            align-items: center;
            .btn-item{
              height: 40px;
              width: 85px;
            }
          }
        }
        .position-info{
          width: 100%;
          background: #fff;
          padding: 20px;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          .title{
            font-size: 18px;
          }
          .label{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin:20px 0 10px 0;
            .label-item{
              margin-right: 10px;
              margin-bottom: 10px;
              font-size: 12px;
              color: $darkGray;
              background: $lightGray;
              padding: 4px 8px;
            }
          }
          .introduce{
            font-size: 15px;
            line-height:2;
            padding-top: 20px;
          }
        }
        .map{
          padding: 20px;
          width: 100%;
          height: auto;
          background: #fff;
          border-radius: 5px;
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          margin-top: 20px;
          .map-title{
            font-size: 18px;
            font-weight: bold;
          }
          #container{
            /*地图(容器)显示大小*/
            width:100%;
            height:230px;
            margin-top: 40px;
          }
          .look{
            position: absolute;
            margin-top: 276px;
            margin-left: 650px;
            background: #fff;
            padding: 10px;
            font-size: 14px;
            border-radius: 10px;
            cursor: pointer;
          }
          .look:hover{
            color: $orange;
          }
        }
        .favorite-item{
          padding: 20px;
          width: 100%;
          height: auto;
          background: #fff;
          border-radius: 5px;
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          .title-item{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .favorite-title{
              font-size: 18px;
              font-weight: bold;
              margin-bottom: 20px;
            }
            .more{
              font-size: 14px;
              color: $darkGray;
              cursor: pointer;
            }
          }

          .favorite-list {
            display: flex;
            flex-direction: row;
            width: 100%;
            flex-wrap: wrap;


            .position-item {
              width: calc((100% - 30px) / 2);
              margin-right: 15px;
              margin-bottom: 15px;
              background: #F6F6F8;
            }

            .position-item:nth-child(2n) {
              margin-right: 0;
            }

          }
        }
      }
      .company-block{
        width: 380px;
        background: #fff;
        border-radius: 5px;
        padding:20px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        .title{
          font-size: 18px;
        }
        .company-info{
          display: flex;
          width: 100%;
          flex-direction: row;
          align-items: center;
          margin:20px 0;
          .company-photo{
            width: 50px;
            height: 50px;
          }
          .info-block{
            width: calc(100% - 70px);
            margin-left: 10px;
            display: flex;
            flex-direction:column;
            .name-block{
              display: flex;
              flex-direction: row;
              font-size: 14px;
              .name{
                width: calc(100% - 40px);
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
              .focus-on{
                padding: 2px;
                width: 60px;
                color: $orange;
                text-align: right;
              }
            }
            .position{
              font-size: 14px;
              margin-top: 8px;
              .num{
                color: $orange;
              }
            }

          }
        }
        .authentication{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          margin-right: 30px;

          .authenticate{
            font-size: 14px;
            align-items: center;
            height: 20px;
            border-radius: 2px;
            .el-icon-set-up{
              color: #FF8888;
              margin-right: 8px;
              font-size: 20px;
            }
            .el-icon-s-custom{
              margin-right: 8px;
              font-size: 20px;
              color: #79DEA2;
            }
          }
        }
        .info-item{
          width: 100%;
          font-size: 13px;
          margin-bottom: 10px;
          white-space: pre-wrap;
          line-height: 1.5;
          .info-value{
            color: $darkGray;
          }
        }
        .map{
          width: 100%;
          height: auto;
          margin-bottom: 10px;
          border-radius: 10px;
          overflow: hidden;
          #map{
            /*地图(容器)显示大小*/
            width:100%;
            height:220px;
          }
        }
      }
    }
  }
}
</style>
